<template>
  <div class="app-container" style="padding: 0 !important;">
    <el-form inline size="small" ref="queryForm" :model="queryParams" v-show="showSearch" label-width="100px">

      <el-form-item label="车牌号" prop="carNo">
        <el-input style="width:215px;" v-model="queryParams.carNo"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="list" border>

      <el-table-column label="操作" width="160" align="center">
        <template slot-scope="{row}" v-if="row.status>0&&row.status<5">
          <el-button type="text" v-if="row.status<3" @click="confimDispatchCar(row)" >确定配车</el-button>
        </template>
      </el-table-column>
      <el-table-column label="车辆信息" prop="carNo" width="240"  align="center">
        <template slot-scope="scope">
          <div><b>{{scope.row.carNo}}</b></div>
          <div> {{ scope.row.carSeriesName }}{{ scope.row.carModelName }}</div>
        </template>
      </el-table-column>
      <el-table-column label="门店信息" prop="carNo" width="160"  align="center">
        <template slot-scope="scope">
          <div>归属:&nbsp;&nbsp;{{scope.row.belongingStore}}</div>
          <div>停靠:&nbsp;&nbsp;{{scope.row.locatedStore}}</div>
        </template>
      </el-table-column>
      <el-table-column label="车辆状态" prop="carNo"  align="center">
        <template slot-scope="scope">
          <template v-if="scope.row.status===0">
            <div> <el-tag type="success">当前排车</el-tag></div>
            <template v-if="scope.row.isSecondmentIn">
              <div>预计调入时间:&nbsp;&nbsp;{{scope.row.startTime | filterNull}}</div>
              <div>间隔时间:&nbsp;&nbsp;{{scope.row.intervalTimeStr | filterNull}}</div>
            </template>
            <div v-else >间隔时间:&nbsp;&nbsp;{{scope.row.intervalTimeStr | filterNull}}</div>
          </template>
          <template v-if="scope.row.status===1">
            <div><el-tag type="danger">预排推荐车辆</el-tag></div>
            <template v-if="scope.row.isSecondmentIn">
              <div>预计调入时间:&nbsp;&nbsp;{{scope.row.startTime | filterNull}}</div>
              <div>间隔时间:&nbsp;&nbsp;{{scope.row.intervalTimeStr | filterNull}}</div>
            </template>
            <div v-else >间隔时间:&nbsp;&nbsp;{{scope.row.intervalTimeStr | filterNull}}</div>
          </template>
          <template v-if="scope.row.status===2">
            <div>可排</div>
            <template v-if="scope.row.isSecondmentIn">
              <div>预计调入时间:&nbsp;&nbsp;{{scope.row.startTime | filterNull}}</div>
              <div>间隔时间:&nbsp;&nbsp;{{scope.row.intervalTimeStr | filterNull}}</div>
            </template>
            <div v-else >间隔时间:&nbsp;&nbsp;{{scope.row.intervalTimeStr | filterNull}}</div>
          </template>
          <template v-if="scope.row.status===3">
            <div>已预排至其他订单【{{scope.row.orderSourceName}}:{{scope.row.orderNo}}】</div>
            <div>若分配此车辆，则预排订单重新排车</div>
            <div>订单时间：{{scope.row.startTime | filterNull}}~{{scope.row.endTime | filterNull}}</div>
            <div>间隔时间:&nbsp;&nbsp;{{scope.row.intervalTimeStr}}</div>
          </template>
          <template v-if="scope.row.status===4">
            <div>已分配至其他订单【{{scope.row.orderSourceName}}:{{scope.row.orderNo}}】</div>
            <div>若强制配车，则下述订单将重新排车</div>
            <div>订单时间：{{scope.row.startTime | filterNull}}~{{scope.row.endTime | filterNull}}</div>
            <div>间隔时间:&nbsp;&nbsp;{{scope.row.intervalTimeStr}}</div>
          </template>
          <template v-if="scope.row.status===5">
            <div>车辆下线<span v-if="scope.row.remark">({{scope.row.remark}})</span></div>
            <div>下架时间：{{scope.row.startTime | filterNull}}~{{scope.row.endTime | filterNull}}</div>
          </template>
          <template v-if="scope.row.status===6">
            <div>车辆借出</div>
            <div>借调时间：{{scope.row.startTime | filterNull}}~{{scope.row.endTime | filterNull}}</div>
          </template>
          <template v-if="scope.row.status===7">
            <div>车辆调拨</div>
            <template v-if="scope.row.endTime">
              <div>调出时间：{{scope.row.startTime | filterNull}}~{{scope.row.endTime | filterNull}}</div>
            </template>
            <template v-else>
              <div>调出时间：{{scope.row.startTime | filterNull}}</div>
            </template>
          </template>
          <template v-if="scope.row.status===8">
            <div>用车中【{{scope.row.orderSourceName}}:{{scope.row.orderNo}}】</div>
            <div>车辆已被其他订单占用，请选择其他车辆</div>
            <div>订单时间：{{scope.row.startTime | filterNull}}~{{scope.row.endTime | filterNull}}</div>
          </template>
        </template>
      </el-table-column>

    </el-table>

     <pagination v-show="total>0" :total="total" :pageSizes="[5,10,15,20,50]" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

  </div>
</template>

<script>
import {carListByMaintenance,charteredSupplyCar} from "@/api/charteredBus/detail";

export default {
  props: {
    orderNo: {
      type: String,
      default: '',
    },
    modelId: {
      type: String,
      default: '',
    },
    storeId: {
      type: String,
      default: '',
    }
  },
  data() {
    return {
      open: false,
      loading: false,
      list: [],
      // 总条数
      total: 0,
      // 显示搜索条件
      showSearch: true,
      queryParams: {
        modelId: this.modelId,//车型id
        storeId: this.storeId,//门店id
        orderNo: this.orderNo,//门店id
        pageNum: 1,//页码   必选
        pageSize: 5,//每页显示数据 必选
        carNo:''
      },

    };
  },
  computed: {
    params() {
      const params = {
        modelId: this.modelId,
        storeId : this.storeId,
        orderNo: this.orderNo,
        pageNum: this.queryParams.pageNum,//页码   必选
        pageSize: this.queryParams.pageSize,//每页显示数据 必选
        carNo:this.queryParams.carNo
      };
      return params;
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    //获取排车车辆列表
    getList() {
      this.loading = true
      carListByMaintenance(this.params).then(response => {
        this.list = response.rows;
        this.total=response.total;
        this.loading =false
      });
    },

    //确定排车
    confimDispatchCar(row){
      charteredSupplyCar({
        carId:row.carId,
        orderNo:this.orderNo
      }).then(res=>{
        this.$message.success('排车成功')
        this.close()
        this.$emit('success')
      })
    },


    close() {
      this.open = false
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
}
</script>
<style>
.sucess-text{
  color: #13ce66;font-size: 12px
}
.warning-text{
  color: #ffba00;font-size: 12px
}
.danger-text{
  color: #ff4949
}
</style>
